// 函数式组件中通过Hooks定义状态
// 导入useState Hooke函数
// Hook函数的作用，给函数式组件赋予状态
import React, {useState,useEffect} from 'react';
import './home.css'


// 导入组件
import One from '../../components/1_One列表渲染、条件渲染/One'
import Two from '../../components/2_Two标签样式设置/Two'
import Three from '../../components/3_Three类组件、函数组件、事件绑定/Three'
import Four from '../../components/4_Four受控组件、非受控组件/Four'
import Five from '../../components/5_Five组件通讯/Five'
import Six from '../../components/6_Six隔代组件通讯/Six'
import Seven from '../../components/7_Seven类组件的生命周期函数/Seven'
import Eight from '../../components/8_Eight函数式组件中通过Hooks定义状态/Eight'
import Nine from '../../components/9_Nine_useEffect中发送请求/Nine'
import Ten from '../../components/10_Ten函数式组件传递参数/Ten'

function Home(props) {
    // 使用useState函数返回一个状态数据和修改状态的方法
    let [isShow,setIsShow] = useState(true)
    // 函数返回的是组件的内容
    return (
        <div className='home'>
            <One></One>
            <Two></Two>
            {/* 组件标签可以自闭合 */}
            <Three/>




            <Four></Four>
            <Five></Five>
            <Six></Six>
            {isShow && <Seven></Seven>}
            <button onClick={()=>{setIsShow(isShow = !isShow)}}>显示/隐藏 Seven</button>
            <Eight></Eight>
            <Nine></Nine>
            <Ten></Ten>
        </div>
    );
}

export default Home;
